<!--***************使用组件方法的过程******************-->
<!--1-通过import引入组件-->
<!--2-通过component:{}注册组件-->
<!--3-通过<标签></标签>引用组件-->
<!--4-通过data(){属性名:值}初始化组件属性-->
<!--5-在method:{}中注册组件的事件调用的函数方法-->
<!--6-通过外部按钮等的事件调用修改组件属性的函数方法-->
<!--7-通过import引用外部API接口-->

<template>
  <div class="reddates">
    <Card>
      <Form ref="UserData" :inline="true" :model="UserData" :label-width="100">
        <row>
          <i-col span="24">
            <Button @click="showAddUser()" type="info" icon="ios-add"
              >新增信息</Button
            >
            <Button @click="PrintTest()" type="primary" ghost icon="ios-paper"
              >打印溯源码</Button
            >
            <Button
              @click="handleDelete()"
              type="warning"
              icon="ios-trash-outline"
              >删除</Button
            >
            <Button @click="handleRefresh()" type="success" icon="ios-refresh"
              >刷新</Button
            >
            <Button
              @click="handleSearch()"
              type="primary"
              icon="ios-search"
              ghost
              >查询</Button
            >
            <!-- <Input
              v-model="searchForm.UserName"
              @on-change="handleClear()"
              clearable
              placeholder="请输入"
              class="search-input"
            /> -->
          </i-col>
        </row>

        <tables
          ref="tables"
          editable
          searchable
          search-place="top"
          v-model="tableData"
          :columns="columns"
          :pageTotal="pageTotal"
          :page="page"
          :border="border"
          :stripe="stripe"
          :rows="rows"
          :loading="loading"
          @on-PageSize="changePageSize"
          @on-change="changePage"
          @on-delete="handleDelete"
          @on-selection-change="onSelect"
        />
      </Form>
      <!-- <Button style="margin: 10px 0" type="primary" @click="exportExcel"
          >导出为Csv文件</Button
        > -->

      <!--3-使用UserDetail组件-->
      <UserDetail
        v-if="viewAccessAll"
        v-bind:visible="visible"
        v-bind:UserData="UserData"
        @cancelCallBack="shutDetailModal"
      ></UserDetail>
      <!--3-使用UserEdit组件-->
      <UserEdit
        v-if="viewAccessSuper"
        v-bind:edit="edit"
        v-bind:UserData="UserData"
        @success="editSuccess"
        @cancelCallBack="shutEditModal"
      ></UserEdit>
      <!--3-使用UserAdd组件-->
      <UserAdd
        v-if="viewAccessSuper1"
        v-bind:add="add"
        v-bind:UserData="UserData"
        @success="success"
        @cancelCallBack="shutAddModal"
      ></UserAdd>
    </Card>
    <Modal
      v-model="viewAccessSuper2"
      title="提示"
      @on-cancel="handleDeleteCanel"
      @on-ok="handleDeleteOk"
    >
      <h2>您确定要删除数据吗？</h2>
    </Modal>
    <p>
      {{ cnt }}
    </p>
    <p>
      {{ count }}
    </p>
  </div>
</template>

<script>
import Tables from "_c/tables"; // 1-引入Tables组件
import UserDetail from "./reddates_detill.vue"; // 1-引入UserDetail组件
import UserEdit from "./reddates_edit.vue"; // 1-引入UserEdit组件
import UserAdd from "./reddates_add.vue"; // 1-引入UserAdd组件
import { getToken } from "@/libs/util";
import {
  createRedDates,
  getCompanyList,
  getAllRedDates,
  updateRedDates,
  getRedDates,
  searchRedDates,
  getOneRedDates,
} from "@/api/data";
export default {
  name: "tables_page",
  components: {
    // 注册组件
    Tables, // 2-将引入的Tables组件进行注册
    UserDetail, // 2-将引入的UserDetail组件进行注册
    UserEdit, // 2-将引入的UserEdit组件进行注册
    UserAdd, // 2-将引入的UserAdd组件进行注册
  },
  data() {
    return {
      // 4-初始化组件属性值
      pageTotal: 100,
      page: 1,
      rows: 10,
      loading: false,
      border: true,
      stripe: true,
      viewAccessAll: false,
      viewAccessSuper: false,
      viewAccessSuper1: false,
      viewAccessSuper2: false,
      edit: true,
      selRows: [],
      cnt: "",
      count: "",
      visible: true,
      add: true,
      searchForm: {
        searchValue: "",
        searchKey: "ReddatesType",
      },
      UserData: {
        Id: 1,
        CompanyId: "",
        CompanyName: "",
        ReddatesType: "",
        ReddatesClass: "",
        NumberKg: "",
        Deviation: "",
        BuyTime: "",
        DeliveryTime: "",
        PackCode: "",
        PlantSite: "",
        PrintNumber: "",
        Wet: "",
      },
      cnt: "",
      count: "",
      PrintNumber: "",
      columns: [
        { type: "selection", fixed: "left", width: 60, align: "center" },
        {
          title: "序号",
          width: 55,
          align: "center",
          render: (h, params) => {
            return h("span", params.index + (this.page - 1) * this.rows + 1);
          },
        },
        {
          title: "企业名称",
          width: 150,
          key: "CompanyName",
          align: "center",
          editable: true,
        },

        {
          title: "红枣种类",
          width: 100,
          key: "ReddatesType",
          align: "center",
          editable: true,
        },
        {
          title: "红枣品级",
          width: 100,
          key: "ReddatesClass",
          align: "center",
        },
        { title: "水分值", width: 80, key: "Wet", align: "center" },
        { title: "千克果粒数", width: 100, key: "NumberKg", align: "center" },

        { title: "均匀度允差", width: 100, key: "Deviation", align: "center" },

        { title: "采收日期", width: 100, key: "BuyTime", align: "center" },
        { title: "出厂日期", width: 100, key: "DeliveryTime", align: "center" },
        { title: "装箱编号", key: "PackCode", width: 220, align: "center" },
        { title: "装箱数量", key: "BoxNumber", width: 120, align: "center" },
        { title: "种植地", key: "PlantSite", width: 150, align: "center" },
        {
          title: "操作",
          fixed: "right",
          key: "action",
          width: 123,
          align: "center",
          options: ["delete"],
          button: [
            (h, params, vm) => {
              return h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "你确定要删除吗?",
                  },
                  on: {
                    "on-ok": () => {
                      vm.$emit("on-delete", params);
                      vm.$emit(
                        "input",
                        params.tableData.filter(
                          (item, index) => index !== params.row.initRowIndex
                        )
                      );
                    },
                  },
                },
                [h("Button", "删除")]
              );
            },
          ],

          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      // 6-通过按钮的单击事件---修改组件属性及调用相关函数方法
                      this.viewAccessAll = true;
                      this.visible = true;
                      this.userId = params.row.Id;
                      this.getUser();
                    },
                  },
                },
                "详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.viewAccessSuper = true;
                      this.edit = true;
                      this.userId = params.row.Id;
                      console.log("打印行号", this.userId);
                      this.getUser();
                    },
                  },
                },
                "编辑"
              ),
            ]);
          },
        },
      ],

      tableData: [],
    };
  },
  methods: {
    onSelect(row) {
      this.selRows = row;
      console.log(row);
    },
    // 打印溯源码
    PrintTest() {
      // 验证是否选择数据
      if (this.selRows.length < 1) {
        this.$Message.success("请选择要打印记录");
        return;
      }

      if (this.selRows.length > 1) {
        this.$Message.success("不能同时打印多条记录");
        return;
      }
      this.$Modal.confirm({
        render: (h) => {
          return h("div", [
            h("Input", {
              props: {
                value: this.cnt,
                autofocus: true,
                placeholder: "请输入打印箱数",
              },
              on: {
                input: (val) => {
                  this.cnt = val;
                },
              },
            }),
            // h('Input')
            h("Input", {
              props: {
                value: this.count,
                autofocus: true,
                placeholder: "请输入重复打印次数(默认为1)",
              },
              on: {
                input: (val) => {
                  this.count = val;
                },
              },
            }),
          ]);
        },
        onOk: () => {
          this.doPrintTest(this.selRows[0]);
        },
      });
    },
    doPrintTest(rowData) {
      let args = {
        baseurl: "/",
        report_method: "get",
        data_method: "get",
        // report:"/xjmh_v2/grf/"+rowData.FactoryId.Code+".grf",
        report: "/redlogin/grf/suyuan.grf?v=" + new Date().getTime(),
        data:
          "/reddate/traceCode/print?id=" +
          rowData.Id +
          "&cnt=" +
          this.cnt +
          "&count=" +
          this.count,
      };
      webapp_ws_ajax_run(args);
      this.handleRefresh();
    },
    //  删除事件
    handleDelete() {
      console.log(this.selRows);
      if (this.selRows.length > 0) {
        this.viewAccessSuper2 = true;
      } else {
        this.$Message.success("请选择要删除的记录");
      }
    },
    handleDeleteCanel() {},
    handleDeleteOk() {
      let data = {
        id: this.selRows[0].Id,
      };
      DeleteInfo(data)
        .then((res) => {
          if (res == "OK") {
            this.$Message.success("删除成功");
            this.loading = false;
            this.handleRefresh();
          }
        })
        .catch((error) => {
          this.$Message.error("请核对之后重新提交");
          this.loading = false;
        });
      this.viewAccessSuper = false;
    },
    handelClear() {},
    // 刷新列表
    handleRefresh() {
      this.searchForm.searchValue = "";
      this.page = 1;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
      };
      searchRedDates(data).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.data);
      });
    },

    // 按条件查询用户信息
    handleSearch() {
      this.page = 1;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
      };
      searchRedDates(data).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.data);
      });
    },

    // 页码改变：按页码 + 每页行数 + 上面查询条件组合查询
    changePage(val) {
      console.log("改变了页码：", val);
      this.page = val;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
      };
      searchRedDates(data).then((res) => {
        this.tableData = res.List;

        console.log(res.data);
      });
    },

    // 每页行数改变：按页码 + 每页行数 + 上面查询条件组合查询
    changePageSize(val) {
      console.log("改变每页条数：", val);
      this.rows = val;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
      };
      searchRedDates(data).then((res) => {
        this.tableData = res.List;

        console.log(res.data);
      });
    },

    showAddUser() {
      // 6-通过按钮的单击事件---修改组件属性及调用相关函数方法--弹出界面
      this.viewAccessSuper1 = true;
      this.add = true;
      console.log("弹出增加对话框");
      // this.getUserEmpt();
    },
    shutDetailModal(data) {
      // 5-将modal对话框的visible属性通过on-cancel事件设置为false
      this.visible = data.mode;
    },
    shutEditModal(data) {
      // 5-modal对话框的visible属性通过on-cancel事件设置为false
      this.edit = data.mode;
    },
    shutAddModal(data) {
      // 5-modal对话框的visible属性通过on-cancel事件设置为false
      this.add = data.mode;
    },
    // 添加用户信息成功
    success(data) {
      this.add = data.mode;
      const para = {
        page: this.page,
        rows: this.rows,
      };
      getAllRedDates(para).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.List);
      });
    },
    // 修改用户信息成功
    editSuccess(data) {
      this.edit = data.mode;
      const para = {
        page: this.page,
        rows: this.rows,
      };
      getAllRedDates(para).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.List);
      });
    },

    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`,
      });
    },

    //   //按ID获取单个加工溯源信息
    getUser() {
      getOneRedDates({
        userId: this.userId,
      }).then((res) => {
        this.UserData = res;
        console.log("返回:", res, 2222222);
      });
    },
  },
  created() {
    // this.height = document.body.clientHeight - 400;
    var _this = this;
    document.onkeydown = function (e) {
      // 按下回车提交
      let key = window.event.keyCode;
      // 事件中keycode=13为回车事件
      if (key == 13) {
        _this.handleSearch();
      }
    };
  },
  // 打开页面后自动加载方法列表
  mounted() {
    getAllRedDates().then((res) => {
      this.tableData = res.List;
      this.pageTotal = res.Total;
      console.log(res.List);
    });
  },
};
</script>

<style lang="less">
// .reddates{
//  /deep/ .ivu-table-cell .ivu-table-cell-with-selection{
//        background: rgb(240, 129, 129);
//   }
// }
.reddates {
  /deep/ .ivu-checkbox .ivu-checkbox-inner {
    background: red;
  }
}
.search {
  margin-bottom: 10px;
  margin-left: 0px;
}
.search-col {
  display: inline-block;
  width: 200px;
}

.search-input {
  display: inline-block;
  width: 200px;
  margin-left: 2px;
}

.search-btn {
  margin-left: 50px;
  width: 80px;
}
</style>
